<template>
  <div class="follows-container">
    <div class="title">我的关注</div>
    <div class="tabs">
      <div
        v-for="tab in tabs"
        :key="tab.key"
        :class="['tab-item', { active: activeTab === tab.key }]"
        @click="activeTab = tab.key"
      >
        {{ tab.label }}
      </div>
    </div>

    <div class="follows-list">
      <div v-for="user in filteredFollowsList" :key="user.userId" class="follow-item">
        <div class="user-left">
          <div class="avatar-wrapper" @click="router.push('/user/userPage?uid='+user.userId)">
            <el-avatar :size="60" :src="user.avatarUrl" />
            <div v-if="user.mutual" class="mutual-follow">
              <el-icon color="#67C23A"><Check /></el-icon>
            </div>
          </div>
          <div class="user-info">
            <span class="nickname" :class="{ 'male': user.gender === 1, 'female': user.gender === 2 }">
              {{ user.nickname }}
            </span>
            <span class="signature">{{ user.signature || '暂无介绍' }}</span>
          </div>
        </div>
        <div class="user-right">
          <el-button class="message-btn" size="small">
            <el-icon><Message /></el-icon>
            私信
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { getUserFollows } from '@/assets/apis/http'
import { Message, Check } from '@element-plus/icons-vue'
import { useUserStore } from '@/store/UserStore'
import {Follow} from "@/assets/apis/MusicDataType"
import { useRouter } from "vue-router"

const userStore = useUserStore()
const router = useRouter();
const followsList = ref(<Follow[]>[])
const activeTab = ref('all')

const tabs = [
  { key: 'all', label: '全部' },
  { key: 'artist', label: '歌手' },
  { key: 'user', label: '用户' }
]

// 根据标签筛选关注列表
const filteredFollowsList = computed(() => {
  if (activeTab.value === 'all') {
    return followsList.value
  } else if (activeTab.value === 'artist') {
    return followsList.value.filter(user => user.userType > 0)
  } else {
    return followsList.value.filter(user => user.userType === 0)
  }
})

async function getFollows() {
    const res = await getUserFollows({
      uid: userStore.userInfo.userId,
      limit: 50,
      offset: 0
    })
    console.log("查询关注", res)
    followsList.value = res.follow || []
}

onMounted(() => {
  getFollows()
})
</script>

<style scoped lang="scss">
.follows-container {
  padding: 20px;

  .title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
  }

  .tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--el-border-color-lighter);
    padding-bottom: 10px;

    .tab-item {
      cursor: pointer;
      padding: 4px 12px;
      font-size: 14px;

      &:hover {
        color: var(--el-color-primary);
      }

      &.active {
        color: var(--el-color-primary);
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: -11px;
          left: 0;
          width: 100%;
          height: 2px;
          background-color: var(--el-color-primary);
        }
      }
    }
  }

  .follows-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;

    .follow-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 16px;
      background-color: var(--el-bg-color-overlay);
      border-radius: 8px;
      transition: background-color 0.3s;

      &:hover {
        background-color: var(--el-fill-color-light);
      }

      .user-left {
        display: flex;
        align-items: center;
        gap: 12px;

        .avatar-wrapper {
          position: relative;

          .mutual-follow {
            position: absolute;
            right: -2px;
            bottom: -2px;
            width: 16px;
            height: 16px;
            background-color: #fff;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);

            .el-icon {
              font-size: 12px;
              background: #67C23A;
              border-radius: 50%;
              padding: 2px;

              svg {
                color: #fff;
              }
            }
          }
        }

        .user-info {
          display: flex;
          flex-direction: column;
          gap: 4px;

          .nickname {
            font-size: 16px;
            font-weight: 500;
            cursor: pointer;

            &.male {
              color: #5594d1;
            }

            &.female {
              color: #ff69b4;
            }

            &:hover {
              opacity: 0.8;
            }
          }

          .signature {
            font-size: 12px;
            color: var(--el-text-color-secondary);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            max-width: 200px;
          }
        }
      }

      .user-right {
        .message-btn {
          display: flex;
          align-items: center;
          gap: 4px;
          background: transparent;
          border: 1px solid var(--el-border-color);
          border-radius: 15px;
          padding: 6px 12px;

          &:hover {
            border-color: var(--el-color-primary);
            color: var(--el-color-primary);
          }
        }
      }
    }
  }
}
</style>
